<script setup lang="ts">
import{ref} from 'vue';
import BGPage from './components/BGPage.vue';
import Pane from './components/Pane.vue';
import Tables from './components/Tables.vue';
import GifBGPage from './components/GifBGPage.vue';
import EChartsStudy from './components/EChartsStudy.vue';
import EchartDemo from './components/EchartDemo.vue';
import ClassRomOnline from './components/ClassRomOnline.vue';

let isShowifBG =ref(true)
</script>

<template>
<div class="main">
<BGPage v-if="isShowifBG">
    <div class="title">
        <span>爱仪监控大屏</span>
    </div>
    <div class="context">
        <div class="row1">
        <EchartDemo style="width: 100%;height: 40vh;"></EchartDemo>
        <EChartsStudy style="width: 100%;height: 40vh;"></EChartsStudy>
        <Pane style="width: 100%;height: 40vh;"></Pane>
        </div>
        <div class="row2">
        <ClassRomOnline style="width: 67vw;height: 50vh;">
        </ClassRomOnline>
        <Tables style="width: 33vw;height: 50vh;"></Tables>
        </div>
    </div>
</BGPage>
</div>
</template>

<style scoped>
.row1{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.row2
{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.main
{
width: 100vw;
height: 100vh;
}
.title
{
    background-image: url(../images/title_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 10%;
    display:  flex;
    justify-content:  center;
    align-items: center;
}
.title>span
{
font-size: 2.5vw;
color:  white;
}
</style>
